<style>
	.ui-autocomplete-loading { background: white url('http://jqueryui.com/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script>
	$(function() {
		var cache = {},
			lastXhr;
		$( "#suche" ).autocomplete({
			minLength: 2,
			source: function( request, response ) {
				var term = request.term;
				if ( term in cache ) {
					response( cache[ term ] );
					return;
				}

				lastXhr = $.getJSON( "_javascript/ajax_searchuser.php", request, function( data, status, xhr ) {
					cache[ term ] = data;
					if ( xhr === lastXhr ) {
						response( data );
					}
				});
			}
		});
	});
	</script>
<article class="module width_full">
    <header><h3>{#search#}</h3></header>
        <div class="module_content">
            <div class="content">
                <fieldset>
                    <label>{#search#}</label>
                    <div style="width:100%; height:60px;">
                    <input type="text" name="suche" value="{if !empty($quicksearch)}{$quicksearch}{/if}" id="suche" style="clear:both; width:80%; float:left;"/>
                    <input type="submit" name="senden" id="senden" value="{#search#} " style="float:right; margin-right:10px;" class="alt_btn">
                    </div>
                    <script>
						{if !empty($quicksearch)}
						$("document").ready(function() {
								$("#senden").trigger('click');
						});
						{/if}
                        $(document).ready(function() {
                          $('#last_search').html('<p><img src="http://www.gatzsch.ch/img/loading.gif"  /> - {#loading#}!</p>');
                          $('#last_search').load("_javascript/ajax_search.php?action=last");
                        });
                        $("#senden").click(function() {
                          var text = '<b>{#search_start#} "' + $("#suche").val() + '"{#search_end#}!</b>';

                          $('#ajax_load').html('<p><img src="http://www.gatzsch.ch/img/loading.gif"  /> - '+ text +'</p>');
                          $('#ajax_load').load("_javascript/ajax_search.php?suche=" + $("#suche").val());
                          $('#last_search').html('<p><img src="http://www.gatzsch.ch/img/loading.gif"  /> - {#loading#}!</p>');
                          $('#last_search').load("_javascript/ajax_search.php?action=last");
                        });
                        $("#suche").keypress(function(event) {
                        var code = (event.keyCode ? event.keyCode : event.which);
                         if(code == 13) { //Enter keycode
                         var text = '<b>{#search_start#} "' + $("#suche").val() + '"{#search_end#}!</b>';
                          $('#ajax_load').html('<p><img src="http://www.gatzsch.ch/img/loading.gif"  /> - '+ text +'</p>');
                          $('#ajax_load').load("ajax_search.php?suche=" + $("#suche").val());
                          $('#last_search').html('<p><img src="http://www.gatzsch.ch/img/loading.gif"  /> - {#loading#}!</p>');
                          $('#last_search').load("ajax_search.php?action=last");
                                }
                        });
                    </script>
                    <div id="ajax_load"><div style="text-align:center; width:100%;">{#searchinfo#}</span></div>
                </fieldset>
                <fieldset>
                    <label>{#last_search#}</label>
                    <table width="100%" border="0" cellspacing="1" cellpadding="3" style="font-size:12px;">
                        <tr>
                            <td width="70%">{#notion#}</td>
                            <td width="30%" align="right">{#timestamp#}</td>
                        </tr>
                    </table>
                    <table width="100%" border="0" id="last_search" cellspacing="1" cellpadding="3">
                       
                    </table>                    
                </fieldset>
	    </div>
        </div>
</article>